Fox 2.0 Router 过渡动画

过渡动画

在前端应用越来越注重用户的体验，因此页面切换的过渡动画也变得不可或缺。fox router提供了内置的动画支持，例如append/remove, show/hide两组导航动作。 通过在fox-router-view设置对应的参数，即可开启过渡动画效果。

例子

    <fox-router-view class="fox-card-views" view-class="fox-card-view"
        view-active-class="fox-card-view-active"
        view-deactive-class="fox-card-view-deactive"
        transition = "true"
        transition-name = "fox-card-view-trans"
        :multi="true"></fox-router-view>

过渡动画属性说明

参数	类型	默认值	说明
css	boolean	true	true支持样式控制动画，false则通过函数控制动画
transition	boolean	false	是否开启过渡动画
transition-name	string		进入过渡的开始状态
enter-class	string		进入过渡的开始状态
enter-active-class	string		进入过渡生效时的状态
enter-to-class	string		进入过渡的结束状态
leave-class	string		离开过渡的结束状态
leave-active-class	string		离开过渡生效时的状态
leave-to-class	string		离开过渡的结束状态
show-class	string		显示过渡的开始状态
show-active-class	string		实现过渡生效时的状态
show-to-class	string		显示过渡的结束状态
hide-class	string		隐藏过渡的结束状态
hide-active-class	string		隐藏过渡生效时的状态
hide-to-class	string		隐藏过渡的结束状态

transition-name是一个设置过渡动画样式的简约方法，比如设置transition-name = "fox-view-trans"，那么控件就会把过渡样式自动设置为如下：

• enter-class="fox-view-trans-enter"
• enter-active-class="fox-view-trans-enter-active"
• enter-to-class="fox-view-trans-enter-to"
• leave-class="fox-view-trans-leave"
• leave-active-class="fox-view-trans-leave-active"
• leave-to-class="fox-view-trans-leave-to"
• show-class="fox-view-trans-show"
• show-active-class="fox-view-trans-show-active"
• show-to-class="fox-view-trans-show-to"
• hide-class="fox-view-trans-hide"
• hide-active-class="fox-view-trans-hide-active"
• hide-to-class="fox-view-trans-hide-to"